import React, {useEffect, useState} from 'react';
import {
  Button,
  Dimensions,
  FlatList,
  Image,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text, TextInput, ToastAndroid,
  TouchableOpacity,
  View,
} from 'react-native';
import {DOMAIN_URL, noticeDelete, noticeDetail, userRead, userUnread} from "../util/api";
import {useNavigation} from "@react-navigation/native";
import UserIconList from "./compenent/UserIconList";
import { PAGENAME } from '../util/PageName';
import AsyncStorage from "@react-native-async-storage/async-storage";
import {style} from "../theme";

const { width, height } = Dimensions.get('screen');

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];
const NoticeDetailScreen = (props: { navigation: any }) => {
  const [selectedId, setSelectedId] = useState(null);
  const [item, setNotice] = useState({});
  const [noticeReadUsers, setNoticeReadUsers] = useState({});
  const [noticeUnReadUsers, setNoticeUnReadUsers] = useState({});
  const [isAdmin, setIsAdmin] = useState(false);
  const navigation = useNavigation();
  if (props && props.route && props.route.params) {
    const noticeId = props.route.params.item.noticeid;
    useEffect(() => {
      const unsubscribe = navigation.addListener(
          'focus',
          payload => {
            getNoticeById(noticeId);
            getNoticeUserRead(noticeId);
            getNoticeUserUnRead(noticeId);
          }
      );
      return () => {
        unsubscribe();
      };
    },[navigation]);

    // setNotice(item);
  }

  AsyncStorage.getItem('isAdmin').then(value => {
    console.log('this.state.isAdmin', value);
    setIsAdmin(value == 'true' ? true : false)
  });
  const getNoticeUserRead = (noticeId) => {
    noticeDetail(noticeId).then((res) => {
      setNotice(res.data)
    })
  }

  const getNoticeById = (noticeId) => {
    userRead(noticeId).then((res) => {
      setNoticeReadUsers(res.data);
    })
  }

  const getNoticeUserUnRead = (noticeId) => {
    userUnread(noticeId).then((res) => {
      console.log(res);
      setNoticeUnReadUsers(res.data);
    })
  }

  const deleteNotice = (noticeId) => {
    noticeDelete(noticeId).then((res) => {
      ToastAndroid.show('删除成功', 2000);
    }).catch((err) => {
      ToastAndroid.show('删除失败', 2000);
    }).finally(() => {
      props.navigation.goBack();
    });
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View>

          <Text style={styles.label}>公告内容</Text>
          <TextInput editable={false}
              style={[styles.input]}
              value={item.noticecontent}
              multiline
          />

          {isAdmin && (
              <View style={{marginTop: 10}}>
                <View>
                  <Text style={styles.subTitle}>已读党员</Text>
                  <UserIconList users={noticeReadUsers} />
                </View>
                <View>
                  <Text style={styles.subTitle}>未读党员</Text>
                  <UserIconList users={noticeUnReadUsers} />
                </View>
              </View>
          )}


        </View>

        {isAdmin && (
            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', marginBottom: 10 }}>
              <TouchableOpacity onPress={() => {props.navigation.push(PAGENAME.NOTICE_UPDATE, {item: item})}}>
                <Image source={require('../assets/images/icon/edit.png')} style={{
                  width: 20, // 图标宽度
                  height: 20, // 图标高度
                }} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {deleteNotice(item.noticeid)}}>
                <Image source={require('../assets/images/icon/delete.png')} style={{
                  width: 20, // 图标宽度
                  height: 20, // 图标高度
                  marginLeft: 15,
                  marginRight: 10
                }} />
              </TouchableOpacity>
            </View>
        )}


      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // marginTop: StatusBar.currentHeight || 0,
    marginHorizontal: 8,
    marginTop: 8,
  },
  // item: {
  //   padding: 20,
  //   marginVertical: 8,
  //   marginHorizontal: 16,
  // },
  title: {
    fontSize: 32,
  },
  indexDataRow: {
    marginBottom: 4,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  subTitle: {
    fontSize: 16,
    marginVertical: 4,
    fontWeight: '600'
  },
  label: {
    fontSize: 16,
    marginBottom: 5,
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 5,
    marginBottom: 10,
    padding: 10,
  },
});


export default NoticeDetailScreen;
